<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.col{
				color: skyblue;
				font-size: 30px;
				transition: 1s;
			}
			img{
				width: 200px;
				height: auto;
			}
			/*
			 *img标签里面设置的宽高一般用来设置图片的真实宽高
			 * 展示宽高用css写
			 * 
			 * 
			 * */
		</style>
	</head>
	<body>
		<div class="test">我是div1</div>
		<div class="test" id="two">我是div2</div>
		<div class="test1" name="div3">我是div3</div>
		<img src="img/dongtai-4.png" alt="美少女" width="100" height="200"/>
		<img src="img/dongtai-5.png"/>
		<script type="text/javascript">
			/**
			 * DOM(document object model),文档对象模型
			 * DOM把html文档分为一个个节点
			 * 	1、元素，叫做元素节点
			 * 	2、属性，叫做属性节点
			 * 	3、文本，叫做文本节点
			 * 	4、注释，叫做注释节点
			 * 
			 * 一、document对象
			 * 		当html文档载入浏览器的时候，会把html文档自动添加到document对象下。
			 * 
			 * 方法和属性
			 * */
			//输出内容到html文档中
			document.write("1233");
			//writeln之间有空格，writeln后面会添加一个换行符
			document.writeln("3556");
			document.writeln("3556");
			
			/**
			 * 1、document.querySelector(n);
			 * n:代表css的选择器
			 * 用来获取到具有该选择器的第一元素
			 * 如果选择有多个同样选择器的元素时，只能获取到第一个具有该选择器的元素。
			 * 
			 * 2、document.querySelectorAll(n);
			 * n:代表css的选择器
			 * 用来获取到所有具有该选择器的元素，返回一个节点列表（类数组）。
			 * 要获取节点列表里面的元素，可以通过数组获取元素的方法
			 * 
			 *3、document.getElementsByTagName(elementName);
			 * elementName：代表标签名
			 * 可以通过标签名来获取到所有具有该标签名的元素，返回值是一个html集合(类数组)。
			 * 要获取节点列表里面的元素，可以通过数组获取元素的方法
			 * 
			 * 4、document.getElementsByClassName(className);
			 * className:代表类名
			 * 获取到所有具有该类名的元素，返回值是一个html集合
			 * 
			 * 5、document.getElementById(idName);
			 * idName：代表id名
			 * 用来获取具有该id名的元素，返回值就是该元素。
			 * 
			 * 用querySelector和get~方法来获取元素的区别
			 * 1、性能不一样
			 * 	get~方法比query~方法好
			 * 2、query~静态获取元素；get~动态获取元素 
			 * */
			var test = document.querySelector("div");
			console.log(test);
			
			var alltest = document.querySelectorAll("div");
			console.log(alltest);
			
			var allarget= document.getElementsByTagName("div");
			console.log(allarget);
			
			var ele = document.getElementsByClassName("test");
			console.log(ele);
			console.log(ele[0]);
			
			var two=document.getElementById("two");
			console.log(two);
			
			var div3=document.getElementsByName("div3");
			console.log(div3);
			
			
			/**
			 * 添加监听事件(添加事件句柄)
			 * document.addEventListener(event，callback)；
			 * event：代表我们需要添加的事件类型，比如单击事件(click)，双击事件(dblclick)....
			 * callback：代表一个回调函数，就是我们做的事情都定义在该函数里面。
			 * 
			 * */
			var div3=document.querySelector(".test1");
			div3.addEventListener("click",function(){
				alert("未成年人请在父母陪同下观看");
			})
			
			/**
			 * 创建元素
			 * document.createElement(elName);
			 * elName:代表需要创建的标签名
			 * 
			 * 添加元素
			 * parent.appendChild(child);
			 * parent:代表需要添加元素的父级元素
			 * child：代表我们创建的元素/文本
			 * 
			 * 创建一个文本节点
			 * document.createTexNode(str);
			 * str：代表我们需要填入的内容
			 * */
			var p = document.createElement("p");
			two.appendChild(p);
			var txt1 = document.createTextNode("我是通过文本节点创建出来的内容");
			var txt2 = document.createTextNode("我是另一个文本");
			var isclick = true;
			//p.appendChild(txt);
			
			two.addEventListener("click",function(){
				if(isclick){
					p.appendChild(txt1);
				}else{
					p.appendChild(txt2);
				}
				isclick=!isclick;//取反，意思是把我们原来正确的变为错误的，把错误的变为正确的;结果为布尔值
			})
			var str="";
			console.log(!str);
			
			
			/**
			 * innerText,innerHTML
			 * 向元素添加文本内容，再次添加的时候会覆盖掉原来的内容。
			 * 
			 * 区别
			 * innerText不能识别标签
			 * innerHTML可以识别标签
			 * */
			var h1=document.createElement("h1");
			h1.innerText="我是通过innertext添加的文本";
			console.log(document.body);
			document.body.appendChild(h1);
			h1.addEventListener("click",function(){
				if(isclick){
					h1.innerText="我是点击进来的内容";
				}else{
					h1.innerText="我是通过innertext添加的文本";
				}
				isclick=!isclick;
			})
			
			var h2=document.createElement("h2");
			document.body.appendChild(h2);
			h2.innerHTML="我是通过innerHTML添加进来的";
			h2.innerHTML="<a>再次添加内容</a>";
			
			/**
			 * 创建属性节点
			 * document.createAttribute(attr);
			 * attr：代表我们要创建的属性名
			 * 
			 * 给属性节点赋值
			 * 通过value给属性节点赋值，例如：clName.value="h2"；
			 * 
			 * 给元素添加属性节点
			 * setAttributeNode(attrrName);
			 * attrName:代表我们创建的属性节点名。
			 * */
			var clName=document.createAttribute("class");
			clName.value="h2";
			h2.setAttributeNode(clName);
			
			h2.addEventListener("click",function(){
				clName.value="col";
			})
			
			//document.documentElement返回文档根节点
			console.log(document.documentElement);
			
			/**
			 * 获取所以img标签
			 *  document.image
			 * */
			var imgs = document.images;
			console.log(imgs[0].src);
			//点击切换图片
			imgs[0].addEventListener("click",function(){
				if(isclick){
					imgs[0].src="img/dongtai-5.png";
				}else{
					imgs[0].src="img/dongtai-4.png";
				}
				isclick=!isclick;
			})
			
			/**
			 * 移除事件句柄
			 * document.removeEventlistener(event,callback);
			 * 和添加事件句柄的参数一样
			 * */
			document.addEventListener("click",myFun);
			function myFun(){
				console.log("添加事件监听");
			}
			document.removeEventListener("click",myFun);
		</script>
	</body>
</html>
